<template>
  <a-spin :spinning="spinning" tip="组织等级加载中..." style="width: 100%">
    <!-- 组织等级选项卡 -->
    <a-tabs v-bind="$attrs" v-on="$listeners" v-if="list.length > 0" v-model="activeId" @change="handleChange">
      <!-- 组织等级列表 -->
      <a-tab-pane v-for="item in list" :key="item.id">
        <div slot="tab">
          {{ item.name }}
        </div>
        <slot />
      </a-tab-pane>
    </a-tabs>
    <div v-if="list.length == 0 && !spinning" class="mb12" align="center" style="width: 100%">
      <b>暂无组织等级信息</b>
    </div>
  </a-spin>
</template>

<script>
import { typesLabel } from '@/api/quality/quality' // api

export default {
  name: 'TabsOrgLevels',
  data() {
    return {
      spinning: false, // 加载控件
      list: [], // 工程类别列表
    }
  },
  props: {
    // 当前工程类别id
    id: {
      type: [String, Number],
      default: () => '',
    },
  },
  computed: {
    // 选中工程类别id
    activeId: {
      get: function () {
        return this.id
      },
      set: function (e) {
        this.$emit('update:id', e)
      },
    },
    option() {
      let e = this.activeId
      return this.list.find((item) => item.id == e)
    },
  },
  watch: {
    option(e) {
      this.$emit('update:option', e)
    },
  },
  mounted() {
    // 初始化列表
    this.getTitle().then((res) => {
      res && this.$emit('switch')
    })
  },
  methods: {
    // 获取工程类别列表
    getTitle() {
      this.spinning = true
      // 获取下拉框列表
      return typesLabel
        .getList({ type: '15' })
        .then((res) => {
          this.spinning = false
          let hasList = res.data.length > 0
          this.list = res.data
          !this.activeId && hasList && (this.activeId = this.list[0].id) // 设置第一个为默认选项
          return hasList
        })
        .catch((e) => {
          this.spinning = false
        })
    },
    // 切换工程类别
    handleChange(e) {
      this.activeId = e
      // 获取分项工程
      this.$nextTick(() => {
        this.$emit('switch', e)
      })
    },
  },
}
</script>
